<!DOCTYPE html>
<html lang="en">
<head>
    <script src="lib/jquery-3.3.1.js"></script>
    <script src="./js/tools.js"></script>
    <script src="./js/move.js"></script>
    <meta charset="UTF-8">
    <title>小米官网模仿</title>
    <link rel="stylesheet" href="./css/reset.css">
    <!--<link rel="stylesheet" href="./css/xiaomi.css">-->
    <link rel="icon" href="image/favicon.ico">
    <link rel="stylesheet/less" href="css/xmless.less">
    <script src="lib/less.min.js"></script>
    <script src="./js/xiaomi.js"></script>
    <link rel="stylesheet" href="lib/icon/iconfont.css">
    <script src="lib/art-template/template-web.js"></script>

</head>
<body>
<!--固定导航开始-->
<div class="fixed">
    <ul>
        <li>
            <a href="#">
                <i class="iconfont icon-weibiaoti1"></i>
                <p>手机APP</p>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-xiazai"></i>
                <p>个人中心</p>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-lianxikefu"></i>
                <p>联系客服</p>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
    </ul>
    <div class="returntop hidden">
        <a href="#">
            <i class="iconfont icon-huidaodingbu"></i>
            <p>回到顶部</p>
        </a>
    </div>
</div>

<!--固定导航结束-->
<!--导航开始-->
<div class="header">
    <div class="head">
        <ul class="head-l">
            <li>
                <a href="#">小米商城</a>
            </li>
            <li><a href="#">MIUI</a></li>
            <li><a href="#">IoT</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">金融</a></li>
            <li><a href="#">有品</a></li>
            <li><a href="#">小爱开放平台</a></li>
            <li><a href="#">政企服务</a></li>
            <li><a href="#">资质证照</a></li>
            <li><a href="#">协议规则</a></li>
            <li><a href="#">下载app</a></li>
            <li><a href="#">Select Region</a></li>
        </ul>
        <ul>
            <span>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li class="car"><a href="#"><i class="iconfont icon-gouwuche1"> </i>购物车(0)</a></li>
            </span>
        </ul>
    </div>
</div>
<div class="nav">
    <div class="main-nav">
        <div class="logo">
            <img src="image/logo.png">
        </div>

        <div class="bar">
            <ul>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">新品</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
            <div class="h-hidden">
                <div class="wrap">
                    <div >
                        <p class="top">减200元</p>
                        <a  href="#"><img src="image/hidden1.png" alt=""></a>
                        <h3>小米8</h3>
                        <p>潮流</p>
                    </div>
                    <div>
                        <p class="top">减200元</p>
                        <a href="#"><img src="image/hidden1.png" alt=""></a>
                        <h3>小米8</h3>
                        <p>潮流</p>
                    </div>
                    <div>
                        <p class="top">减200元</p>
                        <a  href="#"><img src="image/hidden1.png" alt=""></a>
                        <h3>小米8</h3>
                        <p>潮流</p>
                    </div>
                    <!--<div>-->
                        <!--<p class="top">减200元</p>-->
                        <!--<a href="#"><img src="image/hidden1.png" alt=""></a>-->
                        <!--<h3>小米8</h3>-->
                        <!--<p>潮流</p>-->
                    <!--</div>-->
                    <!--<div>-->
                        <!--<p class="top">减200元</p>-->
                        <!--<a  href="#"><img src="image/hidden1.png" alt=""></a>-->
                        <!--<h3>小米8</h3>-->
                        <!--<p>潮流</p>-->
                    <!--</div>-->
                    <!--<div>-->
                        <!--<p class="top">减200元</p>-->
                        <!--<a  href="#"><img src="image/hidden1.png" alt=""></a>-->
                        <!--<h3>小米8</h3>-->
                        <!--<p>潮流</p>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <div class="search  searchborder">
            <form action="" method="get">
                <input type="text" id="searchBox">
                <button type="submit" class="iconfont icon-sousuo"></button>
                <div class="matchSearch hidden" >
                    <ul>
                        <li><a href="">小米6X</a> <span> ></span></li>
                        <li><a href="">小米MIX</a> <span> ></span></li>
                        <li><a href="">笔记本 平板</a> <span> ></span></li>
                        <li><a href="">家电 插线板</a> <span> ></span></li>
                        <li><a href="">出行 穿戴</a> <span> ></span></li>
                        <li><a href="">智能 路由器</a> <span> ></span></li>
                        <li><a href="">电源 配件</a> <span> ></span></li>
                        <li><a href="">健康 儿童</a> <span> ></span></li>
                        <li><a href="">耳机 音响</a> <span> ></span></li>
                        <li><a href="">生活 箱包</a> <span> ></span></li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>
<!--导航结束-->


<!--轮播图开始-->
<div class="carousel">
    <ul>
        <li style="opacity: 1"><img src="./image/banner1.jpg" alt=""></li>
        <li><img src="./image/banner2.jpg" alt=""></li>
        <li><img src="./image/banner3.jpg" alt=""></li>
        <li><img src="./image/banner4.jpg" alt=""></li>
    </ul>
    <div class="pic">
        <ol>
            <li><div class="ac"></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ol>
        <a class="left"><</a>
        <a class="right">></a>
    </div>
    <!--侧边导航开始-->
    <div class="left-bar">
        <ul>
            <li><a href="">手机 电话卡</a> <span> ></span></li>
            <li><a href="">电视 盒子</a> <span> ></span></li>
            <li><a href="">笔记本 平板</a> <span> ></span></li>
            <li><a href="">家电 插线板</a> <span> ></span></li>
            <li><a href="">出行 穿戴</a> <span> ></span></li>
            <li><a href="">智能 路由器</a> <span> ></span></li>
            <li><a href="">电源 配件</a> <span> ></span></li>
            <li><a href="">健康 儿童</a> <span> ></span></li>
            <li><a href="">耳机 音响</a> <span> ></span></li>
            <li><a href="">生活 箱包</a> <span> ></span></li>
        </ul>
    </div>
    <div class="h-bar hidden">
        <!--<div class="list">-->
            <!--<div>-->
                <!--<a href=""><img src="image/mi9-80.png" />小米9</a>-->
            <!--</div>-->
        <!--</div>-->
    </div>
    <!--侧边导航结束-->
</div>
<!--轮播图结束-->

<!--轮播下隔行开始-->
<div class="cal_b">
    <div class="cal_b_left">
        <ul>
            <li>
                <a href="">
                    <i class="iconfont icon-shouji"></i>
                    <p>选购手机</p>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="iconfont icon-liwu"></i>
                    <p>企业团购</p>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="iconfont icon-F"></i>
                    <p>F码通道</p>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="iconfont icon-SDneicunqia"></i>
                    <p>米粉卡</p>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="iconfont icon-huan"></i>
                    <p>以旧换新</p>
                </a>
            </li> <li>
            <a href="">
                <i class="iconfont icon-card"></i>
                <p>话费充值</p>
            </a>
        </li>


        </ul>
    </div>
    <div class="right">
        <div><img src="./image/cb1.jpg" alt=""></div>
        <div><img src="./image/cb2.jpg" alt=""></div>
        <div><img src="./image/cb3.jpg" alt=""></div>
    </div>
</div>
<div class="cut">
    <img src="./image/fg.jpg" alt="">
</div>
<!--轮播下隔行结束-->

<!--主内容部分开始-->
<div class="main">
    <!--主内容第一部分开始-->
    <div class="first-box">
        <div class="m-head">
            <h2>手机</h2>
            <a href="#">查看更多</a>
        </div>
        <div main-pic1>
            <div class="first-mp-left">
            <img src="image/m_p1.jpg" alt="">
        </div>
            <div class="first-mp-right">
                <div class="product">
                    <p class="m-top">减200元</p>
                    <a href="#"><img src="image/m_p11.jpg" alt=""></a>
                    <h3>小米8青春版</h3>
                    <p class="desc">潮流镜面渐变色，2400万自拍旗舰</p>
                    <p>
                        <span class="price1">1499元</span>
                        <span class="price2"><del>1699元</del></span>
                    </p>
                </div>
                <div class="product">
                    <p class="m-top new">新品</p>
                    <a href="#"><img src="image/m_p12.png" alt=""></a>
                    <h3>小米Play</h3>
                    <p class="desc">内置每月10GB高速流量，高颜值流光渐变色</p>
                    <p>
                        <span class="price1">1099元</span>
                        <span class="price2"><del></del></span>
                    </p>
                </div>

                <div class="product" >
                    <p class="m-top">减400元</p>
                    <a href="#"><img src="image/m_p13.jpg" alt=""></a>
                    <h3>小米8</h3>
                    <p class="desc">相机全新升级，960帧超慢动作</p>
                    <p>
                        <span class="price1">2599元</span>
                        <span class="price2"><del>2999元</del></span>
                    </p>
                </div>

                <div class="product">
                    <p class="m-top">减600元</p>
                    <a href="#"><img src="image/m_p14.jpg" alt=""></a>
                    <h3>小米MIX 2s&nbsp8GB+256GB</h3>
                    <p class="desc">骁龙845 年度旗舰处理器，艺术品般陶瓷机身</p>
                    <p>
                        <span class="price1">3399元</span>
                        <span class="price2"><del>3999元</del></span>
                    </p>
                </div>
                <div class="product">
                    <p class="m-top">享八折</p>
                    <a href="#"><img src="image/m_p15.jpg" alt=""></a>
                    <h3>小米6X 6GB+128GB</h3>
                    <p class="desc">轻薄美观拍照手机</p>
                    <p>
                        <span class="price1">1499元</span>
                        <span class="price2"><del>1999元</del></span>
                    </p>
                </div>
                <div class="product">
                    <p class="m-top">减100元</p>
                    <a href="#"><img src="image/m_p16.jpg" alt=""></a>
                    <h3>小米MAX 3&nbsp4GB+64GB</h3>
                    <p class="desc">&nbsp</p>
                    <p>
                        <span class="price1">1599元</span>
                        <span class="price2"><del>1699元</del></span>
                    </p>
                </div>
                <div class="product">
                    <p class="m-top">减70元</p>
                    <a href="#"><img src="image/m_p17.jpg" alt=""></a>
                    <h3>红米6</h3>
                    <p class="desc">小屏高性能的双摄手机</p>
                    <p>
                        <span class="price1">729元</span>
                        <span class="price2"><del>799元</del></span>
                    </p>
                </div>
                <div class="product">
                    <p class="m-top">减50元</p>
                    <a href="#"><img src="image/m_p18.jpg" alt=""></a>
                    <h3>红米6A 2GB+16GB</h3>
                    <p class="desc">&nbsp</p>
                    <p>
                        <span class="price1">549元</span>
                        <span class="price2"><del>599元</del></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--主内容第一部分结束-->

    <div class="cut">
        <img src="./image/cut1.jpg" alt="">
    </div>

    <!--主内容第二部分开始-->
    <div class="second-box ancestors" data-index="0">
        <div class="m-head">
            <h2>家电</h2>
            <ul>
                <li><a href="#" class="head-manu-ac">热门</a></li>
                <li><a href="#">电视影音</a></li>
                <li><a href="#">电脑</a></li>
                <li><a href="#">家居</a></li>
            </ul>
        </div>
        <div class="main-pic1">
            <div class="second-mp-left">
                <div>
                    <img src="image/jdrm1.jpg" />
                </div>
                <div>
                    <img src="image/jdrm2.jpg" />
                </div>
            </div>
            <div class="second-mp-right" data-name="part-content">
            </div>
        </div>
    </div>
    <!--主内容第二部分结束-->

    <div class="cut">
        <img src="image/cut2.jpg"/>
    </div>

    <!--主内容第三部分开始-->
    <div class="third-box ancestors" data-index="1">
        <div class="m-head">
            <h2>智能</h2>
            <ul>
                <li><a href="#" class="head-manu-ac">热门</a></li>
                <li><a href="#">出行</a></li>
                <li><a href="#">健康</a></li>
                <li><a href="#">酷玩</a></li>
                <li><a href="#">路由器</a></li>
            </ul>
        </div>
        <div class="main-pic1">
            <div class="third-mp-left">
                <div>
                    <img src="image/Intelli1.jpg"/>
                </div>
                <div>
                    <img src="image/Intelli2.jpg"/>
                </div>
            </div>
            <div class="third-mp-right" data-name="part-content">

            </div>
        </div>
    </div>
    <!--主内容第三部分结束-->

    <div class="cut">
        <img src="image/cut3.jpg"/>
    </div>

    <!--主内容第四部分开始-->
    <div class="fourth-box ancestors" data-index="2">
        <div class="m-head">
            <h2>搭配</h2>
            <ul>
                <li><a href="#" class="head-manu-ac">热门</a></li>
                <li><a href="#">耳机</a></li>
                <li><a href="#">音响</a></li>
                <li><a href="#">电源</a></li>
                <li><a href="#">电池存储卡</a></li>
            </ul>
        </div>
        <div class="main-pic1">
            <div class="fourth-mp-left">
                <div>
                   <img src="image/dapei1.jpg" />
                </div>
                <div>
                    <img src="image/dapei2.jpg" />
                </div>
            </div>
            <div class="fourth-mp-right" data-name="part-content">
            </div>
        </div>
    </div>
    <!--主内容第四部分结束-->
    <div class="cut">
        <img src="image/cut4.png"/>
    </div>


    <!--主内容第五部分开始-->
    <div class="five-box ancestors" data-index="3">
        <div class="m-head">
            <h2>配件</h2>
            <ul>
                <li><a href="#" class="head-manu-ac">热门</a></li>
                <li><a href="#">保护套</a></li>
                <li><a href="#">贴膜</a></li>
                <li><a href="#">其他配件</a></li>
            </ul>

        </div>
        <div class="main-pic1">
            <div class="five-mp-left">
                <div>
                   <img src="image/parts1.jpg" />
                </div>
                <div>
                    <img src="image/parts2.jpg" />
                </div>
            </div>
            <div class="five-mp-right" data-name="part-content">
            </div>
        </div>
    </div>
    <!--主内容第五部分结束-->
    <div class="cut">
        <img src="image/cut5.jpg"/>
    </div>

    <!--主内容第六部分开始-->
    <div class="six-box ancestors" data-index="4">
        <div class="m-head">
            <h2>周边</h2>
            <ul>
                <li><a href="#" class="head-manu-ac">热门</a></li>
                <li><a href="#">出行</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">生活周边</a></li>
                <li><a href="#">箱包</a></li>
            </ul>

        </div>
        <div class="main-pic1">
            <div class="six-mp-left">
                <div>
                   <img src="image/around1.jpg"/>
                </div>
                <div>
                    <img src="image/around2.jpg"/>
                </div>
            </div>
            <div class="six-mp-right" data-name="part-content">
            </div>
        </div>
    </div>
    <!--主内容第六部分结束-->
    <div class="cut">
        <img src="image/cut6.jpg"/>
    </div>

    <!--主内容为你推荐部分开始-->
    <div class="foryou-box">
        <div class="m-head">
            <h2>为你推荐</h2>
            <div class="changepage">
                <div class="pre cantuse"><</div>
                <div class="next canuse">></div>
            </div>
        </div>
        <div class="m-crousal">
            <ul>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou1.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 体温计 </a></dd>
                        <dd class="fyprice">19元</dd>
                        <dd class="fygood">一万人好评</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou2.png"/>
                        </dt>
                        <dd class="fydes"><a href=""> 悦米机械键盘 </a></dd>
                        <dd class="fyprice">289元</dd>
                        <dd class="fygood">2624人好评</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou3.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 净水器滤芯两年套装 </a></dd>
                        <dd class="fyprice">768元</dd>
                        <dd class="fygood"></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou1.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 体温计 </a></dd>
                        <dd class="fyprice">19元</dd>
                        <dd class="fygood">一万人好评</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou1.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 体温计 </a></dd>
                        <dd class="fyprice">19元</dd>
                        <dd class="fygood">一万人好评</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou2.png"/>
                        </dt>
                        <dd class="fydes"><a href=""> 悦米机械键盘 </a></dd>
                        <dd class="fyprice">289元</dd>
                        <dd class="fygood">2624人好评</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou3.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 净水器滤芯两年套装 </a></dd>
                        <dd class="fyprice">768元</dd>
                        <dd class="fygood"></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou3.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 净水器滤芯两年套装 </a></dd>
                        <dd class="fyprice">768元</dd>
                        <dd class="fygood"></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou3.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 净水器滤芯两年套装 </a></dd>
                        <dd class="fyprice">768元</dd>
                        <dd class="fygood"></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou1.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 体温计 </a></dd>
                        <dd class="fyprice">19元</dd>
                        <dd class="fygood">一万人好评</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou2.png"/>
                        </dt>
                        <dd class="fydes"><a href=""> 悦米机械键盘 </a></dd>
                        <dd class="fyprice">289元</dd>
                        <dd class="fygood">2624人好评</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="image/foryou3.jpg"/>
                        </dt>
                        <dd class="fydes"><a href=""> 净水器滤芯两年套装 </a></dd>
                        <dd class="fyprice">768元</dd>
                        <dd class="fygood"></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!--主内容为你推荐部分结束-->
    <!--主内容热评产品部分开始-->
    <div class="hotproduct-box">
        <div class="m-head">
            <h2>热评产品</h2>
        </div>
        <div class="hot-product">
            <div class="hproduct">
                <a href=""><img src="image/hproduct1.jpg"/></a>
                <p class="descri"><a>非常好用，孩子使用防止沉迷于电话影响学习。做工很好，定位基本准确，通话清晰。如果加入时间显示就更完美...</a></p>
                <p class="from">来自2736728367286的评价</p>
                <div class="hp-info">
                    <a href="">米兔定位电话</a>
                    <span class="sep">|</span>
                    <span class="hp-price">159元</span>
                </div>
            </div>
            <div class="hproduct">
                <a href=""><img src="image/hproduct1.jpg"/></a>
                <p class="descri"><a>非常好用，孩子使用防止沉迷于电话影响学习。做工很好，定位基本准确，通话清晰。如果加入时间显示就更完美...</a></p>
                <p class="from">来自2736728367286的评价</p>
                <div class="hp-info">
                    <a href="">米兔定位电话</a>
                    <span class="sep">|</span>
                    <span class="hp-price">159元</span>
                </div>
            </div>
            <div class="hproduct">
                <a href=""><img src="image/hproduct1.jpg"/></a>
                <p class="descri"><a>非常好用，孩子使用防止沉迷于电话影响学习。做工很好，定位基本准确，通话清晰。如果加入时间显示就更完美...</a></p>
                <p class="from">来自2736728367286的评价</p>
                <div class="hp-info">
                    <a href="">米兔定位电话</a>
                    <span class="sep">|</span>
                    <span class="hp-price">159元</span>
                </div>
            </div>
            <div class="hproduct">
                <a href=""><img src="image/hproduct1.jpg"/></a>
                <p class="descri"><a>非常好用，孩子使用防止沉迷于电话影响学习。做工很好，定位基本准确，通话清晰。如果加入时间显示就更完美...</a></p>
                <p class="from">来自2736728367286的评价</p>
                <div class="hp-info">
                    <a href="">米兔定位电话</a>
                    <span class="sep">|</span>
                    <span class="hp-price">159元</span>
                </div>
            </div>
        </div>
    </div>
    <!--主内容热评产品部分结束-->
    <!--主内容内容部分开始-->
    <div class="hotproduct-box">
        <div class="m-head">
            <h2>内容</h2>
        </div>
        <div class="content-box">
            <ul class="content">
                <li class="book">
                    <h2>图书</h2>
                    <div>
                        <ul class="main-content">
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                        </ul>
                    </div>
                    <ul class="pages">
                        <li>
                            <div class="out"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                    </ul>
                    <div class="pre"><</div>
                    <div class="next">></div>
                </li>
                <li class="MIUI">
                    <h2>MIUI主题</h2>
                    <div>
                        <ul class="main-content">
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                        </ul>
                    </div>
                    <ul class="pages">
                        <li>
                            <div class="out"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                    </ul>
                    <div class="pre"><</div>
                    <div class="next">></div>
                </li>
                <li class="game">
                    <h2>游戏</h2>
                    <div>
                        <ul class="main-content">
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                        </ul>
                    </div>
                    <ul class="pages">
                        <li>
                            <div class="out"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                    </ul>
                    <div class="pre"><</div>
                    <div class="next">></div>
                </li>
                <li class="apply">
                    <h2>应用</h2>
                    <div>
                        <ul class="main-content">
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                            <li>
                                <h4 class="name">哈利.波特与被诅咒的孩子</h4>
                                <p class="des">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </p>
                                <p class="price">29.37元</p>
                                <img src="image/conten-tu1.png"/>
                            </li>
                        </ul>

                    </div>
                    <ul class="pages">
                        <li>
                            <div class="out"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                        <li>
                            <div class="inner"></div>
                        </li>
                    </ul>
                    <div class="pre"><</div>
                    <div class="next">></div>

                </li>
            </ul>


        </div>
    </div>
    <!--主内容内容部分结束-->
    <footer>
        <div class="servi">
            <div class="footer-content" >
            <div class="sevice">
                <ul>
                    <li>
                        <a href=""><i class="iconfont icon-buoumaotubiao46"></i> 预约维修服务</a>
                    </li>
                    <li>
                        <a href=""><i class="iconfont icon-7tianwuliyoutuihuo"></i> 7天无理由退货</a>
                    </li>
                    <li>
                        <a href=""><i class="iconfont icon-15tianwuliyoutuihuo"></i> 15天免费换货</a>
                    </li>
                    <li>
                        <a href=""><i class="iconfont icon-liwuhuodong"></i> 满150元包邮</a>
                    </li>
                    <li>
                        <a href=""><i class="iconfont icon-dizhi"></i> 520余家售后网点</a>
                    </li>
                </ul>
            </div>
            <div class="foot-info">
                <ul>
                    <li>
                        <h3>帮助中心</h3>
                        <p>账户管理</p>
                        <P>购物指南</P>
                        <P>订单操作</P>
                    </li>
                    <li>
                        <h3>帮助中心</h3>
                        <p>账户管理</p>
                        <P>购物指南</P>
                        <P>订单操作</P>
                    </li>
                    <li>
                        <h3>帮助中心</h3>
                        <p>账户管理</p>
                        <P>购物指南</P>
                        <P>订单操作</P>
                    </li>
                    <li>
                        <h3>帮助中心</h3>
                        <p>账户管理</p>
                        <P>购物指南</P>
                        <P>订单操作</P>
                    </li>
                    <li>
                        <h3>帮助中心</h3>
                        <p>账户管理</p>
                        <P>购物指南</P>
                        <P>订单操作</P>
                    </li>
                    <li>
                        <h3>帮助中心</h3>
                        <p>账户管理</p>
                        <P>购物指南</P>
                        <P>订单操作</P>
                    </li>

                </ul>
                <div class="tel">
                    <p class="phone">400-100-5678</p>
                    <p>周一至周日 8:00-18:00</p>
                    <p>(仅收市话费))</p>
                    <div>联系客服</div>
                </div>
            </div>

        </div>
        </div>
        <div class="bottom">
            <div class="foot-content">
                <img src="image/logo.png" />
                <div class="text">
                    <ul>
                        <li><a href="#">小米商城</a></li>
                        <li><a href="#">MIUI</a></li>
                        <li><a href="#">米家</a></li>
                        <li><a href="#">米聊</a></li>
                        <li><a href="#">多看</a></li>
                        <li><a href="#">游戏</a></li>
                        <li><a href="#">路由器</a></li>
                        <li><a href="#">米粉卡</a></li>
                        <li><a href="#">政企服务</a></li>
                        <li><a href="#">小米天猫店</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">商城用户协议</a></li>
                        <li><a href="#">账户协议</a></li>
                        <li><a href="#">问题反馈</a></li>
                        <li><a href="#">廉政举报</a></li>
                        <li><a href="#">诚信合规</a></li>
                        <li><a href="#">Select Region</a></li>
                    </ul>
                    <br>
                    <p>
                        ©
                        <a href="">mi.com</a>
                        京ICP证110507号
                        <a href="">京ICP备10046444号</a>
                        <a href="">京公网安备11010802020134号 </a>
                        <a href="">京网文[2017]1530-131号</a>
                        <br>
                        <a href="">（京）网械平台备字（2018）第00005号</a>
                        <a href="">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
                        <a href="">营业执照</a>
                        <a href="">医疗器械公告</a>
                        <br>
                        <a href="">增值电信业务许可证</a>
                        <a href="">网络食品经营备案（京）【2018】WLSPJYBAHF-12</a>
                        <a href="">食品经营许可证</a>
                        <br>
                        违法和不良信息举报电话：185-0130-1238
                        <a href="">知识产权侵权投诉</a>
                        本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                </div>
                <div class="img-link">
                    <img src="image/imglink1.png"/>
                    <img src="image/imglink2.png"/>
                    <img src="image/imglink3.png" />
                    <img src="image/imglink4.png"/>
                    <img src="image/imglink5.png" />
                </div>
            </div>
        </div>
    </footer>
</div>
<!--主内容部分结束-->

<!--//定义模板字符串-->
<script id="goods" type="text/html">
    <div class="product">
        {{ if good_status==1}}
        <p class="m-top red">减200元</p>
        {{ else if good_status==2}}
        <p class="m-top red">享8折</p>
        {{ else if good_status==3}}
        <p class="m-top new">新品</p>
        {{ else}}
        <p class="m-top">新品</p>
        {{/if}}
        <a href="#"><img src="{{good_image}}" /></a>
        <h3>{{good_title}}</h3>
        <p class="desc">{{good_desc}}</p>
        <p>
            <span class="price1">{{good_price}}元</span>
            <span class="price2">
                {{if good_worth==0}}
                <del></del>
                {{else}}
                <del>{{good_worth}}元</del>
                {{/if}}
            </span>
        </p>
    </div>
</script>
<!--模板字符串定义完成-->
<!--用小米官网接口，跨域访问服务器，获取搜索框提示数据-->
<script>
    //oBar=document.getElementsByClassName("bar")[0];
    oAs=document.querySelectorAll(".bar li a");
    for(let i=0;i<oAs.length;i++)
    {
        oAs[i].onmouseover=function(){
            let oHidden=document.querySelector(".h-hidden");
            oHidden.style.display="block";
            oHidden.onmouseleave=function(){
                oHidden.style.display="none";
            }
        }
    }
    //用小米官网接口，跨域访问服务器，获取搜索框提示数据
    let match_ac=0;
    //小米搜索框提示
    function xmsearch(data){
        if(data.length){
            html="";
            for(let item of data){
                html+=`<li><a href="">${item.Key}</a> <span>${"约有"+item.Rst+"件"}</span></li>`;
            }
            $(".matchSearch ul").html(html);
        }

    }
    //
    //匹配搜索框效果
    $(".search").on("mouseover",function () {
        $(".h-hidden").css("display","none");
     })
    $("#searchBox").on("focus",function () {

        //获取焦点显示搜索匹配框
        $(".search").removeClass("searchborder");
        $(".matchSearch").removeClass("hidden");
        $(".search button").addClass("srhbtnac");
        $(".search").addClass("searchac");
        //向服务器请求数据
        document.getElementById("searchBox").onkeyup=function () {
            // $(".matchSearch ul").html(html);
            let _script=document.createElement("script");
            _script.src="https://search.mi.com/search/expand?keyword="+this.value+"&jsonpcallback=xmsearch";
            document.body.appendChild(_script);
            document.body.removeChild(_script);
        };
    });
    $("#searchBox").on("blur",function () {
        //获取焦点显示搜索匹配框
        $(".matchSearch").addClass("hidden");
        $(".search button").removeClass("srhbtnac");
        $(".search").removeClass("searchac");
        $(".search").addClass("searchborder");
    });

</script>
</body>
</html>
